import React, {useRef, useState} from "react";
import styles from "./index.less"
import Name from "@/pages/AboutMe/Components/Name";
import PersonalInformation from "@/pages/AboutMe/Components/PersonalInformation";
import FadeInAnimation from "@/common/components/FadeInAnimation";
import ProfessionalSkills from "@/pages/AboutMe/Components/ProfessionalSkills";
import OtherProfessionalSkills from "@/pages/AboutMe/Components/OtherProfessionalSkills";
import SnowAnimation from "@/common/components/SnowAnimation";

const AboutMe = () => {
    const nameRef = useRef<{ signaturesHeight: number }>(null)
    const [showOrHiddenSignatures, setShowOrHiddenSignatures] = useState<boolean>(false)
    const [showOrHiddenPersonalInformation, setShowOrHiddenPersonalInformation] = useState(false)
    const [showOrHiddenProfessionalSkills, setShowOrHiddenProfessionalSkills] = useState(false)
    const [showOrHiddenOtherProfessionalSkills, setShowOrHiddenOtherProfessionalSkills] = useState(false)
    const containerScroll = (e: any) => {
        if (e.target.scrollTop === 0) {
            setShowOrHiddenSignatures(false);
        }
        if (e.target.scrollTop >= 80) {
            setShowOrHiddenSignatures(true);
            setShowOrHiddenPersonalInformation(true);
        }
        if (e.target.scrollTop < 80) {
            setShowOrHiddenPersonalInformation(false);
        }
        if (e.target.scrollTop >= 400 + 80) {
            setShowOrHiddenProfessionalSkills(true);
            setShowOrHiddenOtherProfessionalSkills(true)
        }
        if (e.target.scrollTop < 400 + 80) {
            setShowOrHiddenProfessionalSkills(false);
            setShowOrHiddenOtherProfessionalSkills(false)
        }
    }
    return (
        <>
            <FadeInAnimation>
                <SnowAnimation></SnowAnimation>
                <div className={styles["container"]} onScroll={containerScroll}>
                    <div className={styles["header-img"]}><img src={require("../../../public/images/aboutme.jpg")}
                                                               alt=""/></div>
                    <div className={styles["content"]}>
                        <div className={styles["content-header-picture"]}>
                            <img src={require("../../../public/images/header.jpg")} alt=""/>
                        </div>
                        <Name innerRef={nameRef} showOrHiddenSignatures={showOrHiddenSignatures}></Name>
                        <PersonalInformation
                            showOrHiddenPersonalInformation={showOrHiddenPersonalInformation}></PersonalInformation>
                        <ProfessionalSkills
                            showOrHiddenProfessionalSkills={showOrHiddenProfessionalSkills}></ProfessionalSkills>
                        <OtherProfessionalSkills
                            showOrHiddenOtherProfessionalSkills={showOrHiddenOtherProfessionalSkills}></OtherProfessionalSkills>
                    </div>
                </div>
            </FadeInAnimation>
        </>
    )
}
export default AboutMe;